{% extends 'template.html' %}

{% block head %}
	<script type="text/javascript">
		$(document).ready(function () {
			$("#status").hide();
			$("#robot_name").keydown(function () {
				$("#status").hide();
			});
			$("#robot_code").change(function () {
				$("#status").hide();
			});
			$("#add_robot_form").submit(function () {
				status = "";
				name = $("#robot_name").val();
				code = $("#robot_code").val();
				if (name == "") status = "AI名字不得为空";
				else if (name.length > 20) status = "AI名字长度超过20";
				else if (!/\w+/.test(name)) status = "AI名字只能包含字母、数字和下划线";
				else if (code == "") status = "未选择文件";
				else if (robot_code.files[0].size > {{ game.code_size }}) status = "文件大小超过1M";
				if (status != "") {
					$("#status").text(status).show();
					return false;
				}
				return true;
			});
		});
	</script>
{% endblock head %}

{% block body %}
	<div class="container">
		<h1>{{ game.name }}</h1>

		<h3>游戏介绍</h3>
		{{ game.into|safe }}
		<h3>输入输出说明</h3>
		{{ game.io|safe }}
		<h3>样例AI</h3>
		{% if game.example %}
			<pre style="tab-size:4">{{ game.example }}</pre>
		{% else %}
			<p>无</p>
		{% endif %}
		{% if user.is_authenticated %}
			{% if user_robots %}
				<h3>我的AI</h3>
				<table class="table">
					<tr>
						<th>AI名字</th>
						<th>删除</th>
					</tr>
					{% for robot in user_robots %}
						<tr>
							<td>{{ robot.name }}</td>
							<td><input type="checkbox"/></td>
						</tr>
					{% endfor %}
				</table>
			{% endif %}
			<h3>创建新AI</h3>
			<form id="add_robot_form" enctype="multipart/form-data" action="{% url 'game:addRobot' game_url=game.url %}"
			      method="post">
				{% csrf_token %}
				<div class="form-group">
					<label for="robot_name">AI名字</label>
					<input id="robot_name" type="text" name="name"/>
				</div>
				<div class="form-group">
					<label>上传代码</label>
					<input id="robot_code" type="file" name="code"/>
				</div>
				<div class="form-group has-error">
					<label id="status" class="control-label"></label>
				</div>
				<button class="btn btn-default">提交</button>
			</form>
			{% if user_robots %}
				<h3>测试AI</h3>
				<form action="{% url 'game:result' %}" method="post">
					{% csrf_token %}
					<input name="game" value="{{ game.url }}" type="hidden"/>

					<div class="row">
						<div class="col-md-5">
							<select multiple class="form-control" name="user_robot">
								{% for robot in user_robots %}
									{% if forloop.first %}
										<option value="{{ robot.name }}" selected="selected">{{ robot.name }}</option>
									{% else %}
										<option value="{{ robot.name }}">{{ robot.name }}</option>
									{% endif %}
								{% endfor %}
							</select>
						</div>
						<div class="col-md-2">
							<h4>VS</h4>
						</div>
						<div class="col-md-5">
							<select multiple class="form-control" name="oppo_robot">
								{% for robot in all_robots %}
									{% if forloop.first %}
										<option value="{{ robot.user.username }}-{{ robot.name }}"
										        selected="selected">{{ robot.user.username }}-{{ robot.name }}</option>
									{% else %}
										<option
											value="{{ robot.user.username }}-{{ robot.name }}">{{ robot.user.username }}-{{ robot.name }}</option>
									{% endif %}
								{% endfor %}
							</select>
						</div>
					</div>
					<button class="btn btn-default" type="submit" style="margin-top: 10px">开始比赛</button>
				</form>
			{% endif %}
		{% else %}
			<p>登录以创建AI</p>
		{% endif %}
	</div>
{% endblock body %}